<template>
  <div class="unverified-container">
    <div class="unverified-content" v-if="visible">
      <!-- 关闭按钮 -->
      <div class="close-btn" @click="handleClose">
        <a-icon type="close" />
      </div>
      <!-- 主要内容区域 -->
      <div class="main-content">
        <!-- 图标和文档图标 -->
        <img src="./img/bg.png" />
        <!-- 描述文本 -->
        <p class="description">
          抱歉，您的账号未认证，不能使用全部功能，请进行企业认证
        </p>
        <!-- 按钮组 -->
        <div class="button-group">
          <a-button class="later-btn" @click="handleLater">
            先看看
          </a-button>
          <a-button type="primary" class="verify-btn" @click="handleVerify">
            去认证
          </a-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Unverified',
  data () {
    return {
      visible: true
    }
  },

  methods: {
    handleClose () {
        this.visible = false
    },
    handleLater () {
      // 先看看按钮逻辑
      console.log('用户选择先看看')
      this.$emit('later')
    },
    handleVerify () {
      // 去认证按钮逻辑
      console.log('用户选择去认证')
      this.$emit('verify')
      // 可以跳转到认证页面
      // this.$router.push('/verification')
    }
  }
}
</script>

<style lang="scss" scoped>
.unverified-container {
  width: 100%;
  height: 100%;
  background-color: #f9f9f9;
  display: flex;
  justify-content: center;
  align-items: center;

  .unverified-content {
        position: relative;
        background: white;
        border-radius: 8px;
        width: 80%;
        height: 70vh;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        display: flex;
        align-items: center;
    }

    .close-btn {
        position: absolute;
        top: 16px;
        right: 16px;
        cursor: pointer;
        color: #999;
        font-size: 16px;
        transition: color 0.3s;
    }

    .close-btn:hover {
        color: #666;
    }

    .main-content {
        width: 50%;
        margin: 0 auto;
        text-align: center;
    }

    .description {
        font-size: 14px;
        color: #666;
        line-height: 1.5;
        margin: 20px 0 40px 0;
    }

    .button-group {
        display: flex;
        justify-content: space-between;
        width: 60%;
        margin: 0 auto;
    }

    .later-btn {
        min-width: 140px;
        height: 40px;
        border-radius: 30px;
        border: 1px solid #797979;
        background: white;
        color: #333;
    }

    .later-btn:hover {
        border-color: #40a9ff;
        color: #40a9ff;
    }

    .verify-btn {
        min-width: 140px;
        height: 40px;
        border-radius: 18px;
        background: #1890ff;
        border-color: #1890ff;
    }

    .verify-btn:hover {
        background: #40a9ff;
        border-color: #40a9ff;
    }

}
</style>
